<html>
    <head>
        <title>Overview Map Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js" type="text/javascript"></script>
        <style>
        #map1 {
            width: 500px; 
            height: 300px;
            border: 1px solid gray;
        }
        #map2 {
            width: 500px; 
            height: 300px;
            border: 1px solid gray;
        }
        </style>
    </head>
    <body>
        <h1 id="title">Overview Map</h1>

        <div id="tags">
        </div>
        <p id="shortdesc">
            Enable a small Overview Map that moves/interacts with your main map.
        </p>
        <div id="map1"></div>
        <p>The above map has an overview map control that is created with
        the default options.  Much like a regular map, the map contained by
        the overview map control defaults to a geographic projection.</p>
        <div id="map2"></div>
        <p>The second map has an overview map control that is created with
        non-default options.  In this case, the mapOptions property of the
        control has been set to use non-default projection related properties.
        In addition, any other properties of the overview map control can be
        set in this way.</p>
        <script defer="defer" type="text/javascript">
        
        // create the top map (with default overview map control)
        var map1 = new OpenLayers.Map('map1');
        
        var ol = new OpenLayers.Layer.WMS(
            "OpenLayers WMS", 
            "http://labs.metacarta.com/wms/vmap0",
            {layers: 'basic'}
        );
        
        var jpl = new OpenLayers.Layer.WMS(
            "NASA Global Mosaic", 
            "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
            {layers: "landsat7"}
        );
        
        map1.addLayers([ol, jpl]);
        map1.addControl(new OpenLayers.Control.LayerSwitcher());
        
        // create an overview map control with the default options
        var overview1 = new OpenLayers.Control.OverviewMap();
        map1.addControl(overview1);
        
        map1.setCenter(new OpenLayers.LonLat(0, 0), 2);
        
        // expand the overview map control
        overview1.maximizeControl();
        
        
        // create the bottom map (with advanced overview map control)
        var mapOptions = {
            maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656), 
            maxResolution: 296985/1024,
            projection: "EPSG:2805",
            units: "m"
        };

        var map2 = new OpenLayers.Map('map2', mapOptions);
        
        var bos = new OpenLayers.Layer.WMS(
            "Boston", 
            "http://boston.freemap.in/cgi-bin/mapserv",
            {
                map: '/www/freemap.in/boston/map/gmaps.map', 
                layers: 'border,water,roads,rapid_transit,buildings', 
                format: 'png'
            }
        );
        
        map2.addLayers([bos]);
        map2.addControl(new OpenLayers.Control.LayerSwitcher());
        
        // create an overview map control with non-default options
        var controlOptions = {
            mapOptions: mapOptions
        }
        var overview2 = new OpenLayers.Control.OverviewMap(controlOptions);
        map2.addControl(overview2);
        
        map2.setCenter(new OpenLayers.LonLat(182500, 868500), 3);
        
        // expand the overview map control
        overview2.maximizeControl();

        </script>
    </body>
</html>
